<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US">
<head>
<!-- GenHTML revision 25226-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Using Ajax with Facelets - The Java EE 6 Tutorial</title>
<meta name="robots" content="index,follow">
<meta name="robots" content="index,follow">
<meta name="date" content="2011-03-01">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/ipg.css">
<link rel="stylesheet" type="text/css" href="css/javaeetutorial.css">
</head>

<body>

<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tbody>
   <tr valign="top">
      <td width="400px"><p class="toc level1"><a href="docinfo.html">Document Information</a></p>
<p class="toc level1 tocsp"><a href="gexaf.html">Preface</a></p>
<p class="toc level1 tocsp"><a href="gfirp.html">Part&nbsp;I&nbsp;Introduction</a></p>
<p class="toc level2"><a href="bnaaw.html">1.&nbsp;&nbsp;Overview</a></p>
<p class="toc level2"><a href="gfiud.html">2.&nbsp;&nbsp;Using the Tutorial Examples</a></p>
<p class="toc level1 tocsp"><a href="bnadp.html">Part&nbsp;II&nbsp;The Web Tier</a></p>
<p class="toc level2"><a href="bnadr.html">3.&nbsp;&nbsp;Getting Started with Web Applications</a></p>
<p class="toc level2"><a href="bnaph.html">4.&nbsp;&nbsp;JavaServer Faces Technology</a></p>
<p class="toc level2"><a href="giepx.html">5.&nbsp;&nbsp;Introduction to Facelets</a></p>
<p class="toc level2"><a href="gjddd.html">6.&nbsp;&nbsp;Expression Language</a></p>
<p class="toc level2"><a href="bnaqz.html">7.&nbsp;&nbsp;Using JavaServer Faces Technology in Web Pages</a></p>
<p class="toc level2"><a href="gjcut.html">8.&nbsp;&nbsp;Using Converters, Listeners, and Validators</a></p>
<p class="toc level2"><a href="bnatx.html">9.&nbsp;&nbsp;Developing with JavaServer Faces Technology</a></p>
<p class="toc level2"><a href="gkmaa.html">10.&nbsp;&nbsp;JavaServer Faces Technology Advanced Concepts</a></p>
<p class="toc level2"><a href="bnawo.html">11.&nbsp;&nbsp;Configuring JavaServer Faces Applications</a></p>
<p class="toc level2"><a href="gkiow.html">12.&nbsp;&nbsp;Using Ajax with JavaServer Faces Technology</a></p>
<p class="toc level3"><a href="gkigr.html">Overview of Ajax</a></p>
<p class="toc level3"><a href="gkinl.html">Using Ajax Functionality with JavaServer Faces Technology</a></p>
<div id="scrolltoc" class="onpage">
<p class="toc level3"><a href="">Using Ajax with Facelets</a></p>
<p class="toc level4"><a href="#gkafn">Using the <tt>f:ajax</tt> Tag</a></p>
</div>
<p class="toc level3 tocsp"><a href="gkace.html">Sending an Ajax Request</a></p>
<p class="toc level4"><a href="gkace.html#gkhvt">Using the <tt>event</tt> Attribute</a></p>
<p class="toc level4"><a href="gkace.html#gkhuz">Using the <tt>execute</tt> Attribute</a></p>
<p class="toc level4"><a href="gkace.html#gkhwm">Using the <tt>immediate</tt> Attribute</a></p>
<p class="toc level4"><a href="gkace.html#gkhzs">Using the <tt>listener</tt> Attribute</a></p>
<p class="toc level3 tocsp"><a href="gkddf.html">Monitoring Events on the Client</a></p>
<p class="toc level3"><a href="gkdcb.html">Handling Errors</a></p>
<p class="toc level3"><a href="gkdbr.html">Receiving an Ajax Response</a></p>
<p class="toc level3"><a href="gkuar.html">Ajax Request Lifecycle</a></p>
<p class="toc level3"><a href="gkhyh.html">Grouping of Components</a></p>
<p class="toc level3"><a href="gkaam.html">Loading JavaScript as a Resource</a></p>
<p class="toc level4"><a href="gkaam.html#gkafi">Using JavaScript API in a Facelets Application</a></p>
<p class="toc level4"><a href="gkaam.html#gkipx">Using the <tt>@ResourceDependency</tt> Annotation in a Bean Class</a></p>
<p class="toc level3 tocsp"><a href="gkokb.html">The <tt>ajaxguessnumber</tt> Example Application</a></p>
<p class="toc level4"><a href="gkokb.html#gkoij">The <tt>ajaxguessnumber</tt> Source Files</a></p>
<p class="toc level5"><a href="gkokb.html#gkofw">The <tt>ajaxgreeting.xhtml</tt> Facelets Page</a></p>
<p class="toc level5"><a href="gkokb.html#gkofx">The <tt>ui.js</tt> JavaScript File</a></p>
<p class="toc level5"><a href="gkokb.html#gkohn">The <tt>UserNumberBean</tt> Managed Bean</a></p>
<p class="toc level4 tocsp"><a href="gkokb.html#gkoke">Building, Packaging, Deploying, and Running the <tt>ajaxguessnumber</tt> Example</a></p>
<p class="toc level5"><a href="gkokb.html#glhvu">To Build, Package, and Deploy the <tt>ajaxguessnumber</tt> Example Using NetBeans IDE</a></p>
<p class="toc level5"><a href="gkokb.html#glhvq">To Build, Package, and Deploy the <tt>ajaxguessnumber</tt> Example Using Ant</a></p>
<p class="toc level5"><a href="gkokb.html#glhwe">To Run the <tt>ajaxguessnumber</tt> Example</a></p>
<p class="toc level3 tocsp"><a href="gksdk.html">Further Information about Ajax in JavaServer Faces</a></p>
<p class="toc level2 tocsp"><a href="gkhxa.html">13.&nbsp;&nbsp;Advanced Composite Components</a></p>
<p class="toc level2"><a href="bnavg.html">14.&nbsp;&nbsp;Creating Custom UI Components</a></p>
<p class="toc level2"><a href="bnafd.html">15.&nbsp;&nbsp;Java Servlet Technology</a></p>
<p class="toc level2"><a href="bnaxu.html">16.&nbsp;&nbsp;Internationalizing and Localizing Web Applications</a></p>
<p class="toc level1 tocsp"><a href="bnayk.html">Part&nbsp;III&nbsp;Web Services</a></p>
<p class="toc level2"><a href="gijti.html">17.&nbsp;&nbsp;Introduction to Web Services</a></p>
<p class="toc level2"><a href="bnayl.html">18.&nbsp;&nbsp;Building Web Services with JAX-WS</a></p>
<p class="toc level2"><a href="giepu.html">19.&nbsp;&nbsp;Building RESTful Web Services with JAX-RS</a></p>
<p class="toc level2"><a href="gjjxe.html">20.&nbsp;&nbsp;Advanced JAX-RS Features</a></p>
<p class="toc level2"><a href="gkojl.html">21.&nbsp;&nbsp;Running the Advanced JAX-RS Example Application</a></p>
<p class="toc level1 tocsp"><a href="bnblr.html">Part&nbsp;IV&nbsp;Enterprise Beans</a></p>
<p class="toc level2"><a href="gijsz.html">22.&nbsp;&nbsp;Enterprise Beans</a></p>
<p class="toc level2"><a href="gijre.html">23.&nbsp;&nbsp;Getting Started with Enterprise Beans</a></p>
<p class="toc level2"><a href="gijrb.html">24.&nbsp;&nbsp;Running the Enterprise Bean Examples</a></p>
<p class="toc level2"><a href="bnbpk.html">25.&nbsp;&nbsp;A Message-Driven Bean Example</a></p>
<p class="toc level2"><a href="gkcqz.html">26.&nbsp;&nbsp;Using the Embedded Enterprise Bean Container</a></p>
<p class="toc level2"><a href="gkidz.html">27.&nbsp;&nbsp;Using Asynchronous Method Invocation in Session Beans</a></p>
<p class="toc level1 tocsp"><a href="gjbnr.html">Part&nbsp;V&nbsp;Contexts and Dependency Injection for the Java EE Platform</a></p>
<p class="toc level2"><a href="giwhb.html">28.&nbsp;&nbsp;Introduction to Contexts and Dependency Injection for the Java EE Platform</a></p>
<p class="toc level2"><a href="gjbls.html">29.&nbsp;&nbsp;Running the Basic Contexts and Dependency Injection Examples</a></p>
<p class="toc level2"><a href="gjehi.html">30.&nbsp;&nbsp;Contexts and Dependency Injection for the Java EE Platform: Advanced Topics</a></p>
<p class="toc level2"><a href="gkhre.html">31.&nbsp;&nbsp;Running the Advanced Contexts and Dependency Injection Examples</a></p>
<p class="toc level1 tocsp"><a href="bnbpy.html">Part&nbsp;VI&nbsp;Persistence</a></p>
<p class="toc level2"><a href="bnbpz.html">32.&nbsp;&nbsp;Introduction to the Java Persistence API</a></p>
<p class="toc level2"><a href="gijst.html">33.&nbsp;&nbsp;Running the Persistence Examples</a></p>
<p class="toc level2"><a href="bnbtg.html">34.&nbsp;&nbsp;The Java Persistence Query Language</a></p>
<p class="toc level2"><a href="gjitv.html">35.&nbsp;&nbsp;Using the Criteria API to Create Queries</a></p>
<p class="toc level2"><a href="gkjiq.html">36.&nbsp;&nbsp;Creating and Using String-Based Criteria Queries</a></p>
<p class="toc level2"><a href="gkjjf.html">37.&nbsp;&nbsp;Controlling Concurrent Access to Entity Data with Locking</a></p>
<p class="toc level2"><a href="gkjia.html">38.&nbsp;&nbsp;Improving the Performance of Java Persistence API Applications By Setting a Second-Level Cache</a></p>
<p class="toc level1 tocsp"><a href="gijrp.html">Part&nbsp;VII&nbsp;Security</a></p>
<p class="toc level2"><a href="bnbwj.html">39.&nbsp;&nbsp;Introduction to Security in the Java EE Platform</a></p>
<p class="toc level2"><a href="bncas.html">40.&nbsp;&nbsp;Getting Started Securing Web Applications</a></p>
<p class="toc level2"><a href="bnbyk.html">41.&nbsp;&nbsp;Getting Started Securing Enterprise Applications</a></p>
<p class="toc level1 tocsp"><a href="gijue.html">Part&nbsp;VIII&nbsp;Java EE Supporting Technologies</a></p>
<p class="toc level2"><a href="gijto.html">42.&nbsp;&nbsp;Introduction to Java EE Supporting Technologies</a></p>
<p class="toc level2"><a href="bncih.html">43.&nbsp;&nbsp;Transactions</a></p>
<p class="toc level2"><a href="bncjh.html">44.&nbsp;&nbsp;Resource Connections</a></p>
<p class="toc level2"><a href="bncdq.html">45.&nbsp;&nbsp;Java Message Service Concepts</a></p>
<p class="toc level2"><a href="bncgv.html">46.&nbsp;&nbsp;Java Message Service Examples</a></p>
<p class="toc level2"><a href="gkahp.html">47.&nbsp;&nbsp;Advanced Bean Validation Concepts and Examples</a></p>
<p class="toc level2"><a href="gkeed.html">48.&nbsp;&nbsp;Using Java EE Interceptors</a></p>
<p class="toc level1 tocsp"><a href="gkgjw.html">Part&nbsp;IX&nbsp;Case Studies</a></p>
<p class="toc level2"><a href="gkaee.html">49.&nbsp;&nbsp;Duke's Tutoring Case Study Example</a></p>
<p class="toc level1 tocsp"><a href="idx-1.html">Index</a></p>
</td>
      <td width="10px">&nbsp;</td>
      <td>
         <div class="header">
             <div class="banner">
                <table width="100%" border="0" cellpadding="5" cellspacing="0">
                   <tbody>
                      <tr>
                         <td valign="bottom"><p class="Banner">The Java EE 6 Tutorial
</p></td>
                         <td align="right"  valign="bottom"><img src="graphics/javalogo.png" alt="Java Coffee Cup logo"></td>
                      </tr>
                   </tbody>
                </table>
             </div>

             <div class="header-links">
	         <a href="./index.html">Home</a> | 
<a href="../information/download.html">Download</a> | 
<a href="./javaeetutorial6.pdf">PDF</a> | 
<a href="../information/faq.html">FAQ</a> | 
<a href="http://download.oracle.com/javaee/feedback.htm">Feedback</a>

             </div>
             <div class="navigation">
                 <a href="gkinl.html"><img src="graphics/leftButton.gif" border="0" alt="Previous" title="Previous"></a>
                 <a href="p1.html"><img src="graphics/upButton.gif" border="0" alt="Contents" title="Contents"></a>
                 <a href="gkace.html"><img src="graphics/rightButton.gif" border="0" alt="Next" title="Next"></a>
             </div>
         </div>

	 <div class="maincontent">      	 
             

<a name="gkabr"></a><h2>Using Ajax with Facelets</h2>
<a name="indexterm-824"></a><a name="indexterm-825"></a><p>As mentioned in the previous section, JavaServer Faces technology supports Ajax by using
a built-in JavaScript resource library that is provided as part of the JavaServer
Faces core libraries. This built-in Ajax resource can be used in JavaServer Faces
web applications in one of the following ways:</p>


<ul><li><p>By using the <tt>f:ajax</tt> tag along with another standard component in a Facelets application. This method adds Ajax functionality to any UI component without additional coding and configuration.</p>

</li>
<li><p>By using the JavaScript API method <tt>jsf.ajax.request()</tt>, directly within the Facelets application. This method provides direct access to Ajax methods, and allows customized control of component behavior.</p>

</li></ul>


<a name="gkafn"></a><h3>Using the <tt>f:ajax</tt> Tag</h3>
<a name="indexterm-826"></a><a name="indexterm-827"></a><p>The <tt>f:ajax</tt> tag is a JavaServer Faces core tag that provides Ajax functionality
to any regular UI component when used in conjunction with that component. In
the following example, Ajax behavior is added to an input component by including
the <tt>f:ajax</tt> core tag:</p>

<pre>&lt;h:inputText value="#{bean.message}">
    &lt;f:ajax />
&lt;/h:inputText></pre><p>In this example, although Ajax is enabled, the other attributes of the
<tt>f:ajax</tt> tag are not defined. If an event is not defined, the
default action for the component is performed. For the <tt>inputText</tt> component, when no
<tt>event</tt> attribute is specified, the default event is <tt>valueChange</tt>. <a href="#gkder">Table&nbsp;12-1</a> lists the attributes
of the <tt>f:ajax</tt> tag and their default actions.</p>

<a name="gkder"></a><p class="caption">Table&nbsp;12-1 Attributes of the <tt>f:ajax</tt> Tag</p><table><col width="12%"><col width="35%"><col width="52%"><tr><th align="left" valign="top" scope="column"><p>Name</p>

</th>
<th align="left" valign="top" scope="column"><p>Type</p>

</th>
<th align="left" valign="top" scope="column"><p>Description</p>

</th>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>disabled</tt></p>

</td>
<td align="left" valign="top" scope="row"><p><tt>javax.el.ValueExpression</tt> that evaluates to a Boolean</p>

</td>
<td align="left" valign="top" scope="row"><p>A
Boolean value that identifies the tag status. A value of <tt>true</tt> indicates that
the Ajax behavior should not be rendered. A value of <tt>false</tt> indicates that
the Ajax behavior should be rendered. The default value is <tt>false</tt>. </p>

</td>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>event</tt></p>

</td>
<td align="left" valign="top" scope="row"><p><tt>javax.el.ValueExpression</tt>
that evaluates to a <tt>String</tt></p>

</td>
<td align="left" valign="top" scope="row"><p>A <tt>String</tt> that identifies the type of event
to which the Ajax action will apply. If specified, it must be one
of the events supported by the component. If not specified, the default event
(the event that triggers the Ajax request) is determined for the component. The
default event is <tt>action</tt> for <tt>ActionSource</tt> components and <tt>valueChange</tt> for <tt>EditableValueHolder</tt> components.</p>

</td>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>execute</tt></p>

</td>
<td align="left" valign="top" scope="row"><p><tt>javax.el.ValueExpression</tt> that evaluates
to an <tt>Object</tt></p>

</td>
<td align="left" valign="top" scope="row"><p>A <tt>Collection</tt> that identifies a list of components to be executed
on the server. If a literal is specified, it must be a
space-delimited <tt>String</tt> of component identifiers and/or one of the keywords. If a <tt>ValueExpression</tt>
is specified, it must refer to a property that returns a <tt>Collection</tt> of
<tt>String</tt> objects. If not specified, the default value is <tt>@this</tt>.</p>

</td>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>immediate</tt></p>

</td>
<td align="left" valign="top" scope="row"><p><tt>javax.el.ValueExpression</tt> that evaluates to
a Boolean</p>

</td>
<td align="left" valign="top" scope="row"><p>A Boolean value that indicates whether inputs are to be processed early in
the lifecycle. If <tt>true</tt>, behavior events generated from this behavior are broadcast during
the Apply Request Values phase. Otherwise, the events will be broadcast during the
Invoke Applications phase. </p>

</td>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>listener</tt></p>

</td>
<td align="left" valign="top" scope="row"><p><tt>javax.el.MethodExpression</tt></p>

</td>
<td align="left" valign="top" scope="row"><p>The name of the listener method that is called
when an <tt>AjaxBehaviorEvent</tt> has been broadcast for the listener.</p>

</td>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>onevent</tt></p>

</td>
<td align="left" valign="top" scope="row"><p><tt>javax.el.ValueExpression</tt> that evaluates to
a <tt>String</tt></p>

</td>
<td align="left" valign="top" scope="row"><p>The name of the JavaScript function that handles UI events.</p>

</td>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>onerror</tt></p>

</td>
<td align="left" valign="top" scope="row"><p><tt>javax.el.ValueExpression</tt> that
evaluates to a <tt>String</tt></p>

</td>
<td align="left" valign="top" scope="row"><p>The name of the JavaScript function that handles errors.</p>

</td>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>render</tt></p>

</td>
<td align="left" valign="top" scope="row"><p><tt>javax.el.ValueExpression</tt>
that evaluates to an <tt>Object</tt></p>

</td>
<td align="left" valign="top" scope="row"><p>A <tt>Collection</tt> that identifies a list of components to
be rendered on the client. If a literal is specified, it must
be a space-delimited <tt>String</tt> of component identifiers and/or one of the keywords.
If a <tt>ValueExpression</tt> is specified, it must refer to a property that returns a
<tt>Collection</tt> of <tt>String</tt> objects. If not specified, the default value is <tt>@none</tt>.</p>

</td>
</tr>
</table><p>The keywords listed in <a href="#gknlk">Table&nbsp;12-2</a> can be used with the <tt>execute</tt> and <tt>render</tt>
attributes of the <tt>f:ajax</tt> tag.</p>

<a name="gknlk"></a><p class="caption">Table&nbsp;12-2 Execute and Render Keywords</p><table><col width="13%"><col width="86%"><tr><th align="left" valign="top" scope="column"><p>Keyword</p>

</th>
<th align="left" valign="top" scope="column"><p>Description</p>

</th>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>@all</tt></p>

</td>
<td align="left" valign="top" scope="row"><p>All component identifiers</p>

</td>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>@form</tt></p>

</td>
<td align="left" valign="top" scope="row"><p>The form that encloses the component</p>

</td>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>@none</tt></p>

</td>
<td align="left" valign="top" scope="row"><p>No component
identifiers</p>

</td>
</tr>
<tr><td align="left" valign="top" scope="row"><p><tt>@this</tt></p>

</td>
<td align="left" valign="top" scope="row"><p>The element that triggered the request</p>

</td>
</tr>
</table><p>Note that when you use the <tt>f:ajax</tt> tag in a Facelets page, the
JavaScript resource library is loaded implicitly. This resource library can also be loaded
explicitly as described in <a href="gkaam.html">Loading JavaScript as a Resource</a>.</p>


         </div>
         <div class="navigation">
             <a href="gkinl.html"><img src="graphics/leftButton.gif" border="0" alt="Previous" title="Previous"></a>
             <a href="p1.html"><img src="graphics/upButton.gif" border="0" alt="Contents" title="Contents"></a>
             <a href="gkace.html"><img src="graphics/rightButton.gif" border="0" alt="Next" title="Next"></a>
         </div>

         <div class="copyright">
      	    <p>Copyright &copy; 2011, Oracle and/or its affiliates. All rights reserved. <a href="docinfo.html">Legal Notices</a></p>
      	 </div>

      </td>
   </tr>
</tbody>
</table>
</body>
</html>

